<template>
  <view class="home">
    <headerss title='提现'></headerss>

    <!--  -->
    <view class="withdraw">
      <view class="withdraw_price">可提现余额：1000元</view>
      <view class="price">
        <input type="text" placeholder="请输入提现金额">
        <text class="meiyuan">￥</text>
      </view>

      <view class="name">
        <view class="">姓名</view>
        <input type="text" placeholder="请输入姓名">
      </view>

      <view class="name" style="border: none;">
        <view class="">提现账号</view>
        <input type="text" placeholder="请输入提现账号">
      </view>
    </view>

    <!-- 体现方式 -->
    <view class="withdraw_way" @click="show=true">
      <text>提现方式</text>
      <view class="">
        <u-icon style="vertical-align: sub;" name="weixin-circle-fill" color="#50B674" size="48"
          v-if="value==1"></u-icon>
        <u-icon style="vertical-align: sub;" name="zhifubao-circle-fill" color="#5A9EF7" size="48"
          v-else-if="value==2"></u-icon>
        <u-icon style="vertical-align: sub;" name="red-packet-fill" color="#F3C823" size="48"
          v-else-if="value==3"></u-icon>
        <u-icon name="arrow-right" color="#333333" size="28" style="margin-left: 10rpx;"></u-icon>
      </view>
    </view>

    <!--  -->
    <view class="submit">
      <button>提交申请</button>
    </view>

    <!-- 弹出框 -->
    <u-popup v-model="show" mode="bottom" border-radius="14" height='45%'>
      <view class="withdrawal_method">
        <view class="title">提现方式</view>
        <view class="item">
          <view class="wx">
            <u-icon style="vertical-align: sub;" name="weixin-circle-fill" color="#50B674" size="48"></u-icon>
            <text>微信</text>
          </view>
          <u-radio-group v-model="value">
            <u-radio shape="circle" name="1"></u-radio>
          </u-radio-group>
        </view>

        <view class="item">
          <view class="wx">
            <u-icon style="vertical-align: sub;" name="zhifubao-circle-fill" color="#5A9EF7" size="48"></u-icon>
            <text>支付宝</text>
          </view>
          <u-radio-group v-model="value">
            <u-radio shape="circle" name="2"></u-radio>
          </u-radio-group>
        </view>

        <view class="item">
          <view class="wx">
            <u-icon style="vertical-align: sub;" name="red-packet-fill" color="#F3C823" size="48"></u-icon>
            <text>银行卡</text>
          </view>
          <u-radio-group v-model="value">
            <u-radio shape="circle" name="3"></u-radio>
          </u-radio-group>
        </view>

        <view class="button1">
          <button @click="show=false">确定</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false, //提现方式弹框
        value: 0, // 1微信 2支付宝 3银行卡
      };
    },
    methods: {}
  }
</script>

<style lang="scss" scoped>
  .home {
    background: #F5F5F5;
    height: 1612rpx;
  }

  .withdraw {
    margin: 48rpx 32rpx 32rpx;
    padding-top: 48rpx;
    width: 686rpx;
    height: 558rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .withdraw_price {
      margin-left: 32rpx;
      margin-bottom: 48rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
    }

    .price {
      position: relative;
      padding: 16rpx 116rpx;
      border-bottom: 1px solid #EFEFEF;

      .meiyuan {
        position: absolute;
        left: 32rpx;
        bottom: 10rpx;

        font-size: 64rpx;
        font-weight: bold;
        color: #333333;
      }
    }

    .name {
      padding: 48rpx 34rpx 0;
      border-bottom: 1px solid #EFEFEF;

      >view {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
      }

      >input {
        padding: 16rpx 0rpx;

      }
    }
  }

  // 提现方式
  .withdraw_way {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 32rpx;
    padding: 0 32rpx;
    width: 686rpx;
    height: 96rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    >text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
  }

  // 
  .submit {
    margin-top: 72rpx;

    >button {
      width: 622rpx;
      height: 66rpx;
      line-height: 66rpx;
      background: linear-gradient(97deg, #F7DB6D 0%, #F2C51D 100%);
      border-radius: 38rpx 38rpx 38rpx 38rpx;

      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
    }
  }

  // 弹框
  .withdrawal_method {
    padding: 48rpx 32rpx 0;

    .title {
      margin-bottom: 70rpx;
      text-align: center;

      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }

    .item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rpx;
      padding-bottom: 30rpx;
      border-bottom: 1px solid #EEEEEE;

      .wx {
        >text {
          margin-left: 28rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #333333;
        }
      }
    }

    .button1 {
      margin-top: 48rpx;

      >button {
        width: 622rpx;
        height: 66rpx;
        line-height: 66rpx;
        background: linear-gradient(97deg, #F7DB6B 0%, #F3C722 100%);
        border-radius: 38rpx 38rpx 38rpx 38rpx;

        font-size: 32rpx;
      }
    }
  }
</style>